<template>
  <div class="content-detail check-times">
    <div class="card-box--headerwrap" v-if="module !== 'snap'">
      <el-page-header
        icon="el-icon-arrow-left"
        :content="content"
        @back="handleBack"
      ></el-page-header>
    </div>

    <el-card class="card-content">
      <el-timeline class="content-box">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :color="activity.color"
          :class="activity.type"
        >
          <div class="content-detail">
            <div class="node-box">
              <div class="left">{{ activity.nodeName }}</div>
              <div class="right">
                <span>{{ activity.assignee }}</span>
                <template v-if="activity.createTime">
                  <el-divider direction="vertical" />
                  <span>操作时间: {{ activity.createTime }}</span>
                </template>
              </div>
            </div>

            <el-form class="form-box" :label-width="labelWidth">
              <el-form-item v-for="(item, idx) in activity.opinion" :key="idx">
                <template #label>
                  <span class="handle">
                    {{ item.name }}
                    <el-tooltip
                      v-if="item.tips"
                      class="box-item"
                      effect="dark"
                      :content="item.tips"
                      placement="top-start"
                    >
                      <i class="el-icon-question" size="24"></i>
                    </el-tooltip>
                    ：
                  </span>
                </template>

                <template v-if="typeof item.content === 'string'">
                  <span class="handle">{{ item.content }}</span>
                </template>

                <template v-else>
                  <el-link
                    class="link-text"
                    :underline="false"
                    v-for="(obj, ins) in item.content"
                    :key="ins"
                    @click="handlePreview(obj)"
                    >{{ obj.name || obj.fileName }}</el-link
                  >
                </template>
              </el-form-item>
            </el-form>
          </div>
        </el-timeline-item>
      </el-timeline>
      <el-empty v-if="!activities.length" description="暂无记录"></el-empty>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, defineEmits } from "vue";
import { postApproveHistory } from "/@/api/acceptance";
import { handlePreview } from "/@/utils/file";

const props = defineProps({
  instanceId: {
    type: Number || String,
    required: true
  },
  module: {
    type: String,
    defaule: ""
  },
  content: {
    type: String,
    default: "检查反馈详情"
  }
});
const emit = defineEmits(["closeDetail"]);
const activities = ref([]);
const labelWidth = props.module === "civiliz" ? "210px" : "180px";
const getTableData = async () => {
  const { instanceId } = props;
  if (!instanceId) {
    return;
  }
  const params = {
    instanceId
  };
  const { code, data } = await postApproveHistory(params);
  if (code === 200) {
    data.forEach(item => {
      if (item.opinion) {
        if (isJSON(item.opinion)) {
          item.opinion = JSON.parse(item.opinion);
        } else {
          if (item.opinion == "流程结束") {
            item.opinion = [{ name: "备注", content: "流程结束" }];
          }
          if (item.nodeId == "ACT_010") {
            // if (item.opinion.indexOf("备注") == -1) {
            //   item.opinion = [{ name: "备注", content: item.opinion }];
            // }
            item.opinion = [{ name: "备注", content: item.opinion }];
          }
        }
        item.opinion = item.opinion.filter(obj => {
          return obj.content?.length;
        });
      }
    });
    activities.value = data;
  }
};

const isJSON = str => {
  try {
    if (typeof JSON.parse(str) == "object") {
      return true;
    }
  } catch (e) {}
  return false;
};

const handleBack = () => {
  emit("closeDetail");
};

/* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
getTableData();

watch(
  () => props.instanceId,
  () => {
    getTableData();
  }
);
</script>
<style lang="scss" scoped>
.check-times {
  font-family: PingFangSC-Medium, PingFang SC;
  color: #495164;
  font-size: 16px;
  :deep .el-page-header__left {
    color: #5298ff;
    font-size: 16px;
    font-weight: 400;
  }
  .content-box {
    max-height: 60vh;
    overflow: auto;
    padding-right: 10px;
    .content-detail {
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e4e8f2;
      .node-box {
        padding: 10px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fdfdff;
        .left {
          font-size: 16px;
          font-weight: bold;
          color: #495164;
        }
        .right {
          display: flex;
          .el-form-item__label {
            color: #495164;
          }
          align-items: center;
        }
        :deep .el-divider--vertical {
          margin: 0 12px;
        }
        span {
          font-weight: 400;
          color: #8895b7;
        }
      }
      .form-box {
        padding: 10px;
        :deep .el-form-item__label {
          color: #495164;
        }
        :deep .el-upload {
          display: none;
        }
        :deep .el-upload-list__item {
          margin-top: 4px;
        }
        .handle,
        .link-text {
          color: #8895b7;
          padding: 2px 12px;
          margin-right: 4px;
          margin-bottom: 2px;
          background: #fdfdff;
          border-radius: 4px;
          line-height: 18px;
        }
        .handle {
          padding-left: 0;
          padding-right: 0;
        }
        .link-text:hover {
          color: #5298ff;
        }
      }
    }
  }
}

:deep .el-timeline-item__tail {
  height: calc(100% - 12px);
  top: 18px;
}
:deep .el-timeline-item {
  margin-left: 10px;
  padding-top: 4px;
}
:deep .end .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../assets/done.png) no-repeat center center;
  left: -3px;
}

:deep .submit .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../assets/submit.png) no-repeat center center;
  left: -3px;
}

:deep .reject .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../assets/reject.png) no-repeat center center;
  left: -3px;
}
:deep .todo .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../assets/ready.png) no-repeat center center;
  left: -3px;
}
:deep .transfer .el-timeline-item__node {
  width: 16px;
  height: 16px;
  background: url(../../../../assets/ready.png) no-repeat center center;
  left: -3px;
}
:deep .end .el-timeline-item__tail {
  border-left: 2px solid c2cade23;
}
:deep .submit .el-timeline-item__tail {
  border-left: 2px solid rgba(133, 223, 0, 0.2);
}

:deep .reject .el-timeline-item__tail {
  border-left: 2px solid #e45d5d23;
}

:deep .todo .el-timeline-item__tail {
  border-left: 2px solid rgba(82, 152, 255, 0.2);
}

:deep .transfer .el-timeline-item__tail {
  border-left: 2px solid rgba(82, 152, 255, 0.2);
}
</style>
